<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="客户" name="cust_id">
                    <a-input allowClear v-model:value="formState.cust_id" />
                </a-form-item>
            </a-col>

            <a-col :span="6">
                <a-form-item :wrapper-col="{ span: 24, offset: 0 }" :labelCol="{ span: 0 }" has-feedback label="消费日期"
                    name="consume_time">
                    <a-range-picker allowClear format="YYYY-MM-DD HH:mm:ss" show-time value-format="YYYY-MM-DD HH:mm:ss"
                        v-model:value="formState.consume_time" />
                </a-form-item>
            </a-col>


            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-col :span="24">
            <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'name'">
                        <a>{{ text }}</a>
                    </template>
                    <template v-if="column.dataIndex === 'action'">
                        <a type="primary" @click="handleEdit(record)">编辑</a>
                        <a type="primary" @click="handleDelete(record)">删除</a>
                    </template>
                    <template v-if="column.dataIndex === 'attachment'">
                        <a-image v-if="record.attachment.length > 0" style="width: 100px; height: 100px;"
                            :src="`http://localhost:3000/consumption/showImage/${record.attachment[0]}`" />
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>

    <a-row>
        <a-drawer size="large" v-model:open="open" class="custom-class" root-class-name="root-class-name"
            style="color: red" :title="addFormState.consume_id ? '编辑' : '新增'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout" @finish="addFormState.consume_id ? handleEditFinish($event) : handleAddFinish($event)">

                <a-form-item has-feedback label="客户" name="cust_id">
                    <a-select allowClear v-model:value="addFormState.cust_id">
                        <a-select-option :value="item.key" v-for="item in customerList" :key="item.key">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="消费项目" name="project_id">
                    <a-select allowClear v-model:value="addFormState.project_id">
                        <a-select-option :value="item.key" v-for="item in projectList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="消费日期" name="consume_time">
                    <a-date-picker format="YYYY-MM-DD HH:mm:ss" show-time value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 100%" v-model:value="addFormState.consume_time" />
                </a-form-item>

                <a-form-item has-feedback label="实付金额" name="amount">
                    <a-input-number style="width: 100%" v-model:value="addFormState.amount" />
                </a-form-item>

                <a-form-item has-feedback label="支付方式" name="payment">
                    <a-select allowClear v-model:value="addFormState.payment">
                        <a-select-option :value="item.key" v-for="item in paymentMethodList" :key="item.key">{{
                            item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="备注" name="notes">
                    <a-textarea v-model:value="addFormState.notes" />
                </a-form-item>

                <a-form-item has-feedback label="随签附件" name="attachment">
                    <a-col :span="24">
                        <!-- 上传文件 支持jpg,jpeg,png,pdf 回显图片 -->
                        <a-upload v-model:file-list="addFormState.attachment" accept=".jpg,.jpeg,.png,.pdf"
                            action="http://localhost:3000/consumption/upload" :max-count="1"
                            :headers="{ 'Authorization': 'Bearer ' + token }" name="file" list-type="picture-card"
                            :show-upload-list="false" @change="handleUploadChange">
                            <a-image v-if="addFormState.attachment.length > 0"
                                :src="`http://localhost:3000/consumption/showImage/${addFormState.attachment[0]}`"
                                alt="avatar" style="width: 100px; height: 100px;" />
                            <div v-else>
                                <PlusOutlined />
                                <div class="ant-upload-text">上传</div>
                            </div>
                        </a-upload>
                    </a-col>
                </a-form-item>
                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { consumption as service } from '@/api/modulesApi/consumption';
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
const token = localStorage.getItem('token')

// 获取客户列表
const customerList = ref([])
const getCustomerInfo = async () => {
    const res = await service.getCustomerInfo()
    customerList.value = res.data
}
getCustomerInfo()

// 获取项目列表
const projectList = ref([])
const getProject = async () => {
    const res = await service.getProject()
    projectList.value = res.data
}
getProject()

// 获取支付方式列表
const paymentMethodList = ref([])
const getPaymentMethod = async () => {
    const res = await service.getPaymentMethod()
    paymentMethodList.value = res.data
}
getPaymentMethod()
const columns = [
    {
        title: '消费编号',
        dataIndex: 'consume_id',
        key: 'consume_id',
    },
    {
        title: '客户',
        dataIndex: 'cust_id',
        key: 'cust_id',
        customRender: ({ text, record }) => {
            return record.cust_name
        }
    },
    {
        title: '消费项目',
        dataIndex: 'project_id',
        key: 'project_id',
        customRender: ({ text, record }) => {
            return record.project_name
        }
    },
    {
        title: '项目定价',
        dataIndex: 'price',
        key: 'price',
    },
    {
        title: '消费日期',
        dataIndex: 'consume_time',
        key: 'consume_time',
    },
    {
        title: '实付金额',
        dataIndex: 'amount',
        key: 'amount',
    },
    {
        title: '支付方式',
        dataIndex: 'payment',
        key: 'payment',
    },
    {
        title: '备注',
        dataIndex: 'notes',
        key: 'notes',
    },
    {
        title: '随签附件',
        dataIndex: 'attachment',
        key: 'attachment',

    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    }
];

const data = ref([]);

const formRef = ref();
const formState = reactive({
    cust_id: '',
    consume_time: [],

});

const open = ref(false);

const addFormState = reactive({
    consume_id: '',
    cust_id: '',
    project_id: '',
    consume_time: '',
    amount: '',
    payment: '',
    notes: '',
    attachment: [],
});
const addFormRef = ref();

const addRulesForm = {
    cust_id: [{ required: true, message: '请选择客户' }],
    project_id: [{ required: true, message: '请选择消费项目' }],
    consume_time: [{ required: true, message: '请选择消费日期' }],
    amount: [{ required: true, message: '请输入实付金额' }],
    payment: [{ required: true, message: '请选择支付方式' }],
};

const handleAdd = () => {
    addFormState.consume_id = '';
    addFormState.cust_id = '';
    addFormState.project_id = '';
    addFormState.consume_time = '';
    addFormState.amount = '';
    addFormState.payment = '';
    addFormState.notes = '';
    addFormState.attachment = [];
    open.value = true;
};

const handleAddFinish = async (values) => {
    await service.addConsumption(values)
    message.success('新增成功')
    getConsumption()
    addFormRef.value.resetFields();
    open.value = false;
};

const handleEditFinish = async (values) => {
    values.consume_id = addFormState.consume_id
    await service.updateConsumption(values)
    message.success('编辑成功')
    getConsumption()
    addFormRef.value.resetFields();
    open.value = false;
}

const handleDelete = async (record) => {
    await service.deleteConsumption({ consume_id: record.consume_id })
    message.success('删除成功')
    getConsumption()
}

const handleEdit = (record) => {
    addFormState.consume_id = record.consume_id
    addFormState.cust_id = record.cust_id
    addFormState.project_id = record.project_id
    addFormState.consume_time = record.consume_time
    addFormState.amount = record.amount
    addFormState.payment = record.payment
    addFormState.notes = record.notes
    addFormState.attachment = record.attachment
    open.value = true;
}
const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    console.log(values, formState);
    getConsumption()
};

const getConsumption = async () => {
    const res = await service.getConsumption(formState)
    data.value = res.data
}
getConsumption()


const handleUploadChange = (info) => {
    if (info.file.status === 'done') {
        addFormState.attachment[0] = info.file.response.data.file_id
    }
}


</script>